{{- $fonts    := .Site.Params.fonts }}
{{- $fontSlice := (slice) }}
{{- range $fonts }}
{{- $fontSlice = $fontSlice | append (printf "%s:%s" (replace .name " " "+") (delimit .sizes ",")) }}
{{- end }}
{{- $fontsUrl := printf "https://fonts.googleapis.com/css?family=%s" (delimit $fontSlice "|") }}
{{- $sansSerifFont := .Site.Params.sansSerifFont }}
{{- $monospaceFont := .Site.Params.monospaceFont }}
{{- $fontAwesomeVersion := .Site.Params.fontAwesomeVersion }}
{{- $fontAwesomeUrl     := printf "https://use.fontawesome.com/releases/v%s/css/all.css" $fontAwesomeVersion }}

@charset "utf-8"
@import url("{{ $fontsUrl }}")
@import url("{{ $fontAwesomeUrl }}")

// Project-specific colors and variables
$etcd-blue: #419eda
$etcd-light-blue: lighten($etcd-blue, 10%)
$etcd-dark-blue: darken($etcd-blue, 10%)

@import "bulma/sass/utilities/initial-variables"
@import "bulma/sass/utilities/functions"

// Bulma variable overrides
$primary: $etcd-blue
$link: $etcd-dark-blue
$code: $etcd-dark-blue
$code-background: $white-bis
$family-sans-serif: "{{ $sansSerifFont }}", BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-code: "{{ $monospaceFont }}", monospace
$dashboard-panel-padding: 2rem 1.25rem 5rem 1.25rem
$dashboard-panel-header-bottom-margin: 1.5rem
$dashboard-panel-footer-top-margin: 3rem
$section-padding: 3rem 2rem
$navbar-height: 5rem
$navbar-item-img-max-height: $navbar-height * 0.5

@import "bulma/sass/utilities/derived-variables"

$colors: mergeColorMaps(("orange": ($orange, $white)), $colors)

@import "bulma/bulma"
@import "bulma-dashboard/src/bulma-dashboard"

@import "helpers"
@import "toc"
@import "blog"

.content
  +desktop
    width: 80%

  .highlight, pre
    background-color: rgb(39, 40, 34)
    color: $white

=logo($touch, $desktop)
  +touch
    width: $touch

  +desktop
    width: $desktop

.content
  figure
    margin: 0 auto
    figcaption

// Safari-specific attribute
.hero
  display: -webkit-box

.is-hero-logo
  +logo(60%, 30%)
  margin-bottom: 1.75rem

.is-cncf-logo
  +logo(70%, 40%)
  margin-top: 1.5rem

.is-footer-logo
  +logo(10%, 5%)
  margin-bottom: 1rem

.is-panel-logo
  width: 40%

.is-project-logo
  margin-bottom: .75rem
  //+logo(60%, 70%)
  height: 3rem
  width: auto

.is-adopter-block
  & + &
    margin-top: 2rem

.adopter-list
  li
    p
      font-size: 1.1rem
      margin-top: .5rem

  li + li
    margin-top: .75rem

// Ensure sticky footer
.page
  display: flex
  flex-direction: column
  min-height: 100vh

  .main
    flex: 1

.is-shadowless
  box-shadow: none

.is-home-svg
  +x-center

  svg
    height: 7.5rem
  
#TableOfContents
  li
    a
      line-height: 100%

      &:hover
        code
          color: $grey-lighter
      code
        padding: .25rem
        background-color: $black

.dashboard-panel
  +touch
    flex: 30% 0 0 !important

.docs-panel
  line-height: 120%

  &-section
    font-size: 1.25rem
    display: block
    color: $black
    padding: .5rem
    
    &:hover
      background-color: $white-bis

    &.is-active
      color: $danger

  &-page
    display: block
    font-size: 1rem
    color: $black
    padding: .25rem .5rem .25rem 1.25rem

    &:hover
      background-color: $white-bis

    &.is-active
      color: $danger

.navbar-item
  &.is-indented
    padding-left: 1.25rem
  
  &.is-small
    font-size: .9rem
